<template>
  <el-card v-show="masterId" class="box-card" shadow="hover">
    <el-steps v-if="!loading" direction="vertical" :active="resumeList.length" :align-center="true">
      <el-step v-for="(item, index) in resumeList" :key="index" :status="getStatus(item.processType)">
        <template #title>{{ item.processNodeName }}</template>
        <template #description :style="item.processType==='next'?{color: 'black'}:{}">
          <el-card shadow="hover" :body-style="{padding: '10px', 'border-radio': '6px'}">
            <div>
              处置时间：{{ item.handleDate }}
              <el-divider direction="vertical"></el-divider>
              <span v-if="!!item.timeShow">处置耗时：【{{ item.timeShow }}】</span>
            </div>
            <span :style="[{'word-break': 'break-all'}, {'white-space': 'pre-line'}]">{{ item.handleInfo }}</span>
          </el-card>
        </template>
      </el-step>
    </el-steps>
    <div v-else>
      <i class="el-icon-loading"></i> 履历列表加载中
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {getResumeList} from "@/core/api/service";
import type {Resume} from "@/core/entity/Resume";
import {usedTimeShow} from "@/core/common/DateUtil";

const {category, masterId} = defineProps(['category', 'masterId']);
const emits = defineEmits(["loaded"]);

const loading = ref(true);
const resumeList = reactive<Resume[]>([]);
const pms = getResumeList(category, masterId);
pms.then(res => {
  res.map(x => {
    x.timeShow = usedTimeShow(x.consumeTime);
    x.processTypeStatus = getStatus(x.processType)
    x.processTypeName = getName(x.processType)
    return x;
  });
  resumeList.length = 0;
  resumeList.push(...res);
  loading.value = false;
  emits("loaded", res);
})

const getStatus = (type: string) => {
  switch (type) {
    case 'next':
      return 'finish';
    case 'back':
      return 'error';
    case 'flow':
      return 'wait';
    case 'start':
      return 'process';
    case 'close':
      return 'success';
    default:
      return 'finish';
  }
};

const getName = (type: string) => {
  switch (type) {
    case 'next':
      return '同意';
    case 'back':
      return '驳回';
    case 'flow':
      return '流转';
    case 'start':
      return '启动';
    case 'close':
      return '结束';
    default:
      return '同意';
  }
};

</script>

<script lang="ts">
export default {
  name: "SillyResume",
}
</script>

<style>
.el-step__head.is-jump {
  color: var(--el-color-warning);
  border-color: var(--el-color-warning);
}
.el-step__title.is-jump {
  color: var(--el-color-warning);
  border-color: var(--el-color-warning);
}
</style>